const n = `
<template>
  <s-form label-width="10em" colon="：">
    <s-form-item label="链接主题">
      <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否显示图标">
      <s-radio-group
        v-model="options.icon"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="是否打开新标签页">
      <s-radio-group
        v-model="options.blanket"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="是否显示下划线">
      <s-radio-group
        v-model="options.underline"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="是否禁用">
      <s-radio-group
        v-model="options.disabled"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="链接示例">
      <s-flex gap="1em">
        <s-link
          href="https://www.baidu.com"
          :icon="options.icon ? 'link' : undefined"
          :theme="options.theme"
          :blanket="options.blanket"
          :underline="options.underline"
          :disabled="options.disabled"
          >百度一下</s-link
        >
        <s-link
          tag="span"
          :icon="options.icon ? 'link' : undefined"
          :theme="options.theme"
          :blanket="options.blanket"
          :underline="options.underline"
          :disabled="options.disabled"
          @click="handleLinkClick"
          >自定义</s-link
        >
      </s-flex>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  LINK_THEME_DEFAULT,
  LINK_THEME_LABEL,
  LINK_THEME_OPTIONS,
  MessageCommand,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class TagDemo extends Vue {
  /**
   * @description: 主题列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = LINK_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: LINK_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    theme: LINK_THEME_DEFAULT, // 链接主题
    icon: false, // 是否显示图标
    blanket: true, // 是否打开新标签页
    underline: false, // 是否显示下划线
    disabled: false, // 是否禁用
  };

  /**
   * @description: 处理链接点击
   * @private
   * @returns
   */
  handleLinkClick(): void {
    MessageCommand.success("您点击了链接");
  }
}
<\/script>
`; export { n as default };
